<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="cdnload" content="jquery" />
    <meta name="author" content="lijinbo" />
    <title>127-网格布局研究</title>
    <link rel="stylesheet" href="./127-style.css" />
  </head>

  <body>
    <ul>
      <li>
        <a href="./网格布局深入研究.html">网格布局深入研究</a>
      </li>
      <li>
        <p>
          <a href="https://mp.weixin.qq.com/s/jfC0lQmAkBds0QsmoVArGg" target="_blank"> grid 的更多使用例子-微信转载 </a>
        </p>
        <p><a href="https://web.dev/one-line-layouts" target="_blank">grid 的更多使用例子-原文</a></p>
        <p><a href="https://1linelayouts.glitch.me" target="_blank">代码演示</a></p>
      </li>
    </ul>

    <ul>
      <li>
        <p>经典网格布局</p>
        <ol class="page">
          <li>
            <p>flex 实现网格</p>
            <div class="list container max1"></div>
          </li>
          <li>
            <p>grid 实现网格</p>
            <div class="list container max2"></div>
          </li>
        </ol>
        <p>用flex方式实现网格布局 代码复杂且 效果也不太好， 果然还是术业有专攻</p>
      </li>
      <li>
        <p>
          <a href="../125-css左侧固定宽度右侧自适应布局/125-index.html" target="_blank">左侧固定宽度右侧自适应布局</a>
        </p>
      </li>
      <li>
        <p>响应式格子</p>
        <div class="list grid2"></div>
      </li>
    </ul>

    <script>
      for (let i = 0; i < 7; i++) {
        $('.list').append(`<div class="box">${i}</div>`)
      }
    </script>
  </body>
</html>
